<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="assignVisible"
    size="1200px"
    title="授权"
    :show-close="false"
    @close="handleClose"
  >
    <template #header>
      <div class="drawer-header">
        <div class="header-content">
          <span class="drawer-title">授权</span>
        </div>
        <el-button type="text" @click="handleClose" class="close-btn"
          >关闭</el-button
        >
      </div>
    </template>
    <div class="role-assign">
      <el-divider />
      <div class="item" v-for="item in dataConfig" :key="item.value">
        <el-checkbox
          style="width: 100px"
          v-model="item.value"
          :label="item.label"
          :value="item.key"
        />
        <el-checkbox
          v-model="item.all"
          style="width: 70px"
          :disabled="!item.value"
          label="全选"
          @change="
            (val) => {
              handleAllChange(item, val);
            }
          "
        />
        <el-checkbox-group
          v-model="item.list"
          @change="
            (val) => {
              handleChange(item, val);
            }
          "
        >
          <el-checkbox
            v-for="child in item.children"
            :key="child.value"
            :disabled="!item.value"
            :label="child.label"
            :value="child.value"
          />
        </el-checkbox-group>
      </div>
    </div>
    <template #footer>
      <el-button plain @click="handleClose" class="footer-btn">取消</el-button>
      <el-button type="primary" @click="handleAssign" class="footer-btn"
        >保存</el-button
      >
    </template>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import { permissionsConfig } from "./config";
import { rolesPermissions } from "@/api";
import { ElMessage } from "element-plus";
// 权限配置
const dataConfig = ref(permissionsConfig());
const assignVisible = ref(false);
const currentRow = ref({}); // 当前行
const emit = defineEmits(["refresh"]);
defineOptions({
  name: "Assign",
});

const openDrawer = (row) => {
  console.log(row, "row");
  currentRow.value = row;
  if (row.permissions) {
  } else {
  }
  assignVisible.value = true;
};

const handleClose = () => {
  assignVisible.value = false;
};

const handleAssign = () => {
  // 转换成对象
  let o1 = {};
  dataConfig.value.forEach((item) => {
    o1[item.key] = item.list.join(",");
  });
  let o = {
    id: currentRow.value.id,
    ...o1,
  };
  rolesPermissions(o).then((res) => {
    if (res.code == 0) {
      ElMessage.success("操作成功");
      handleClose();
      // 刷新列表
      emit("refresh");
    }
  });
};

const handleAllChange = (item, val) => {
  console.log(item, "item - all");
  if (val) {
    item.list = item.children.map((child) => child.value);
  } else {
    item.list = [];
  }
};
const handleChange = (item, val) => {
  console.log(item, "item", val);
  if (val.length == item.children.length) {
    item.all = true;
  } else {
    item.all = false;
  }
  // console.log(dataConfig.value, "dataConfig");
};

defineExpose({
  openDrawer,
});
</script>

<style scoped lang="scss">
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  .header-content {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .close-btn {
    font-size: 16px;
    padding: 13px 16px;
    border: 1px solid #595757;
    color: #000000;
    background: #fff;
    border-radius: 4px;
  }
}

.role-assign {
  display: flex;
  flex-direction: column;
  gap: 10px;
  .item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

.footer-btn {
  padding: 13px 16px !important;
  border: 1px solid #595757 !important;
}

:deep(.el-checkbox__inner) {
  border-color: #c0c4cc !important;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #c0c4cc !important;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #c0c4cc !important;
}
</style>
